<template>
    <div class="home">
        <div class="parent">
            <div class="text">
                居家好物
            </div>
            <div class="bg"></div>
        </div>
        
        <p><router-link to="/home/location">{{ location }}</router-link></p>
        <div id="container"></div> 
        <router-link to="/home/search">跳转到搜索页面</router-link>
        <router-link to="/home/list?id=1">新品首发</router-link>
        <router-link to="/home/list?id=2">人气推荐</router-link>
        <div class="swipe-item">
            <van-swipe class="my-swipe" :autoplay="30000" indicator-color="white">
            <van-swipe-item  v-for="item in homeInfo.banner" :key="item.id">
                <img class="banner" :src="item.image_url" alt="">
            </van-swipe-item>
           
        </van-swipe>
        <div class="topic">
            <ul>
                <li v-for="item in homeInfo.topicList" :key="item.id">
                    <img :src="item.item_pic_url" alt="">
                    <h2>{{ item.title  }}</h2>
                </li>
            </ul>
        </div>
        </div>
        <div>
            <div v-for="item in homeInfo.newCategoryList">
                {{ item.name }}好物
                <ul>
                    <li v-for="ele in item.goodsList">
                        <img class="img" :src="ele.list_pic_url" alt="">
                    </li>
                    <li>
                        {{ item.name }}好物
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import {
    index
} from "@/api/home/index"
import {
    mapState
} from "vuex"
export default {
    data() {
        return {
            homeInfo:{},
            location:""
        };
    },
    computed: {
        ...mapState({
            vuexLocation:"location"
        })
    },
    created() {
        index({
            id:1
        })
        .then(res =>{
            console.log(res)
            this.homeInfo = res
        })

    },
    mounted() {
        // var map = new AMap.Map('container', {
        //     zoom:18,//级别 [0-20]
        //     center: [116.397428, 39.90923],//中心点坐标
        // });
        // var map = new AMap.Map('container', {
        //     zoom:18,//级别 [0-20]
        // });
        // // 添加点标记
        // var marker = new AMap.Marker({
        //     position:[116.397428, 39.90923]//位置
        // })
        // map.add(marker);//添加到地图

        // AMap.plugin('AMap.Geolocation', function() {
        //     var geolocation = new AMap.Geolocation({
        //         // 是否使用高精度定位，默认：true
        //         enableHighAccuracy: true,
        //         // 设置定位超时时间，默认：无穷大
        //         timeout: 10000,
        //         // 定位按钮的停靠位置的偏移量
        //         offset: [10, 20],
        //         //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        //         zoomToAccuracy: true,     
        //         //  定位按钮的排放位置,  RB表示右下
        //         position: 'RB'
        //     })

        //     geolocation.getCurrentPosition(function(status,result){
        //             if(status=='complete'){
        //                 onComplete(result)
        //             }else{
        //                 onError(result)
        //             }
        //     });

        //     function onComplete (data) {
        //         // data是具体的定位信息
        //         console.log("成功",data)
        //     }

        //     function onError (data) {
        //         // 定位出错
        //         console.log("失败",data)
        //     }
        //     })


        // ip定位
        var _this = this;
        if(this.vuexLocation.id){ // 如果vuex location中有数据 就使用vuex中的数据
            _this.location = this.vuexLocation.name
            return
        }
        
        AMap.plugin('AMap.CitySearch', function () {
            var citySearch = new AMap.CitySearch()
            citySearch.getLocalCity(function (status, result) {
                if (status === 'complete' && result.info === 'OK') {
                // 查询成功，result即为当前所在城市信息
                    console.log(result)
                    _this.location = result.city
                }
            })
        })
    },
    methods: {

    },
};
</script>

<style scoped lang="scss">
::v-deep .van-swipe__indicator{
    background: red;
}
#container {width:500px; height: 500px; }  
.home{
    .parent{
        position: relative;
        .text{
            text-align: left;
            position: relative;
            // z-index: 2;
        }
        .bg{
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 20px;
            background: red;
            z-index: -1;
        }
    }
    .topic{
        ul{
            display: flex;
            align-items: center;
            overflow: auto;
            img{
                width: 560px;
                height: 308px;
            }
        }
        
    }
    .swipe-item{
        padding:0 10px;
        .banner{
            width: 100%;
        }
    }
    .img{
        width: 100px;
    }
}
</style>
